<template>
	<view class="home">

		<!-- {{banners}} -->
		<!-- 轮播图组件  数据是对象-->
		<home-banner @itemClick="handelitemClick" :banners="banners"></home-banner>
		<!-- 推荐列表组件 -->
		<home-recommend @itemClick="handelitemClick" :recommend="recommend"></home-recommend>
		<!-- 热门推荐组件 简单的一张图片而已 -->
		<home-purplar></home-purplar>
		<!-- tabs切换 -->
		<tab-control @tabIndex="tabIndexClick" :titles="['流行','新款','精选']"></tab-control>
		<!-- 九宫格 -goodsList -->
		<uni-grid :column="2" :highlight="false" :showBorder="false" :square="false">

			<template v-for="(itemInfo,i) in goodsList[currentType].list" :key="i">
				<uni-grid-item>
					<!--显示 每一个item封装的组件 -->
					<GridViewItem @gooditemClick="handelgooditemClick" :itemInfo="itemInfo"></GridViewItem>
				</uni-grid-item>
			</template>
		</uni-grid>
	</view>
</template>

<script setup>
	// 引入页面的生命周期
	import {
		onLoad,onReachBottom
	} from '@dcloudio/uni-app'
	import {
		useHomeStore,
		types
	} from '../../store/home';
	import {
		storeToRefs
	} from 'pinia'
	import HomeBanner from './cpns/home-banner.vue'
	import HomeRecommend from './cpns/home-recommend.vue'
	import HomePurplar from './cpns/home-purplar.vue'
	import GridViewItem from '@/components/grid-view-item/grid-view-item.vue'
	const homeStore = useHomeStore()
	const {
		banners,
		recommend,
		goodsList,
		currentType
	} = storeToRefs(homeStore)

	// import {
	// 	 getHomeData
	// } from '../../service/home';
	onLoad(() => {
		//  getHomeData().then(res => {
		// 	console.log(res);
		// })
		// 获取轮播图和推荐列表的数据
		homeStore.fechHomeMutiData()
		homeStore.fechHomeGoodsData('pop', 1)
		homeStore.fechHomeGoodsData('new', 2)
		homeStore.fechHomeGoodsData('sell', 3)
	})
	// 监听页面滚动到底部
	onReachBottom(() => {
		console.log('onReachBottom'); // 加载对应分类的下一页数据
		homeStore.fechHomeGoodsData(currentType.value, goodsList.value[currentType.value].page + 1)

	})

	function handelitemClick(link) {
		uni.navigateTo({
			url: '/pages/webview/webview?link=' + link
		})
	}

	function tabIndexClick(tabIndex) {
		console.log('tabIndex', tabIndex);
		// 根据点击的索引转换成 英文类型 并设置给当前类型 然后我们可以根据当前类型来取值 遍历
		homeStore.setCurrentType(types[tabIndex])
	}
	function handelgooditemClick(itemInfo){
		console.log('handelgooditemClick',itemInfo.goods_id);
		uni.navigateTo({
			url:'/pages/detail/detail?goods_id='+itemInfo.goods_id
		})
	}
</script>

<style lang="scss">

</style>
